<template>
  <div style="margin-top: 50px">
    <el-form :model="prodectList" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">

      <el-form-item label="商品分类：" prop="ptid">

        <!-- <el-cascader
          v-model="selectProductCateValue"
          :options="productCateOptions">
        </el-cascader> -->

        <el-select
          v-model="prodectList.ptid"
          placeholder="请选择分类">
          <el-option
            v-for="item in productCateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品名称：" prop="pname">
        <el-input v-model="prodectList.pname"></el-input>
      </el-form-item>

      <el-form-item label="商品品牌：" prop="bid">

        <el-select
          v-model="prodectList.bid"
          placeholder="请选择品牌">

          <el-option
            v-for="item in brandOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>

        </el-select>

      </el-form-item>

      <el-form-item label="简介：">
        <el-input
          :autoSize="true"
          v-model="prodectList.pinfo"
          maxlength="25"
          type="textarea"
          placeholder="请输入内容"></el-input>
      </el-form-item>

      <el-form-item label="详细介绍：">
        <el-input
          :autoSize="true"
          v-model="prodectList.pdetnil"
          maxlength="25"
          type="textarea"
          placeholder="请输入内容"></el-input>
      </el-form-item>

      
      <!-- <el-form-item label="商品售价：">
        <el-input v-model="value.price"></el-input>
      </el-form-item> -->


      <el-form-item label="商品库存：" prop="pamount">
        <el-input v-model="prodectList.pamount" type="number"></el-input>
      </el-form-item>

      <el-form-item style="text-align: center">
        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，选择商品规格</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
  // import {fetchListWithChildren} from '@/api/productCate'
  // import {fetchList as fetchBrandList} from '@/api/brand'
  // import {getProduct} from '@/api/product';
  import { brandList, classList ,addProduct } from '@/api/addProduct'

  export default {
    name: "ProductInfoDetail",
    props: {
      value: Object,
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        prodectList:this.value.products[0],
        productCateOptions: [],
        brandOptions: [],
        rules: {
          pname: [
            {required: true, message: '请输入商品名称', trigger: 'blur'},
          ],
          ptid: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
          bid: [{required: true, message: '请选择商品品牌', trigger: 'blur'}],
          pinfo: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
          pdetnil: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
          pamount: [
            {required: true, message: '请输入库存数量', trigger: 'blur'},
            ]
        }
      };
    },
    created() {
      console.log(this.value);
      console.log(this.prodectList);
      // 分类
      this.getProductCateList();
      // 品牌
      this.getBrandList();
    },
    
    methods: {
        // 分类列表
      getProductCateList() {
        classList().then(res=>{
          console.log(res);
          let list = res.obj;
          console.log('在这里');
          console.log(list);
          this.productCateOptions = [];
          for (let i = 0; i < list.length; i++) {
            this.productCateOptions.push({label: list[i].ptype, value: list[i].ptid});
          }
        })
      },
      // 品牌列表
      getBrandList() {
        brandList().then(res=>{
            this.brandOptions=[];
            let list = res.obj;
            for (let i = 0; i < list.length; i++) {
            this.brandOptions.push({label: list[i].bname, value: list[i].bid});
          }
        })
      },
    //  点击下一步
      handleNext(formName){
        console.log(this.value);
        // 转数字
        this.value.products[0].pamount=Number(this.value.products[0].pamount);
        this.$refs[formName].validate((valid) => {
          if (valid) {
              this.$emit('nextStep');
          } else {
            this.$message({
              message: '验证失败',
              type: 'error',
              duration:1000
            });
            return false;
          }
        });
      },
      // handleBrandChange(val) {
      //   console.log(this.value);
      //   let brandName = '';
      //   alert(val);
      //   for (let i = 0; i < this.brandOptions.length; i++) {
      //     if (this.brandOptions[i].value === val) {
      //       brandName = this.brandOptions[i].label;
      //       break;
      //     }
      //   }
      //   alert(brandName);
      //   this.value.brandName = brandName;
      // }
    }
  }
</script>

<style scoped>
</style>
